<template>
	<view>
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" style="height: var(--status-bar-height);"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view>忘记密码</view>
			</view>
		</view>
		<view class="auth">
			<!-- <view class="wanl-title">找回账户密码</view> -->
			<form @submit="formSubmit">
				<form @submit="formSubmit">
					<view class="auth-group radius-bock bg-white wlian-grey-light">
						<image src="../static/phone_1.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
						<input 
							type="text"
							placeholder="输入手机号" 
							confirm-type="next" 
							maxlength="16"
							placeholder-class="placeholder" 
							name="account"
							:value="account"
						></input>
					</view>
					<view class="auth-group radius-bock bg-white wlian-grey-light">
						<image src="../static/phone_1.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
						<input 
							type="text"
							placeholder="输入验证码" 
							confirm-type="next" 
							maxlength="16"
							placeholder-class="placeholder" 
							name="codeVal"
							:value="codeVal"
						></input>
						<text class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="sendMessage" style="font-size: 10px;">{{ countdown == 0 ? '发送验证码' : countdown + 'S'}}</text>
					</view>
					<view class="auth-group radius-bock bg-white wlian-grey-light">
						<image src="../static/code_2.png" mode="widthFix"  style="width: 28rpx;margin-right: 10rpx;"></image>
						<input 
							type="text"
							placeholder="输入新密码" 
							password="true" 
							confirm-type="done"
							maxlength="16"
							placeholder-class="placeholder" 
							name="password"
							:value="password"
						></input>
					</view>
					<view class="auth-group radius-bock bg-white wlian-grey-light">
						<image src="../static/code_2.png" mode="widthFix" style="width: 28rpx;margin-right: 10rpx;"></image>
						<input 
							type="text"
							placeholder="再次输入新密码" 
							password="true" 
							confirm-type="done"
							maxlength="16"
							placeholder-class="placeholder" 
							name="passwordconf"
							:value="passwordconf"
						></input>
					</view>
	
					<view class="auth-button flex flex-direction">
						<button class="cu-btn bg-orange sl radius-bock" @click="reset()" style="width: 624rpx;color: #fff;
	height: 98rpx;background: linear-gradient( 270deg, #EF430F 0%, #F17E19 100%);border-radius: 16rpx 16rpx 16rpx 16rpx;">确认</button>
					</view>
	
	<!-- 				<view class="text-center" @tap="phone">
						短信验证码登录
					</view> -->
	
				</form>
				
<!-- 				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" form-type="submit" :disabled="submitDisabled">下一步</button>
				</view> -->
			</form>
		</view>
	</view>
</template>
<script>
  // import sendVerifyCode from "@/mixins/SendVerifyCode";
  // import {
  //   registerVerify,
  //   registerReset,
  //   register,
  //   getCodeApi,
  //   getUserSpid
  // } from "@/api/user";
  // import {
  //   HTTP_REQUEST_URL
  // } from '@/config/app.js';
	
  // import { validatorDefaultCatch } from "@/utils/dialog";
  // import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
  // import { VUE_APP_API_URL } from "@utils";
  // import colors from '@/mixins/color.js';
  export default {
    name: "RetrievePassword",
    data: function() {
      return {
        account: "",
        phone: "",
        real_name: "",
        password: "",
        passwordconf: "",
        spphone: "",
        sp_real_name: "",
        spid: "",
        captcha: "",
        keyCode: "",
        codeUrl: "",
        codeVal: "",
		event:"register",
        protocol: false,
				checked: 0,
        inAnimation: false,
				disabled: false,
				isDisabled:false,
        isShowCode: false,
				isTijiao: false,
				
				countdown: 0,
				cTimer: null,
				event: '',
      };
    },
    // mixins: [sendVerifyCode, colors],
    mounted: function() {
      // this.getCode();
    },
    onLoad(options) {
      let that = this;
      that.spid = options.spid;
			console.log(options)
			that.spphone = options.sharecode
      console.log("推荐人：" + that.spphone);
    //   getUserSpid(options.spid).then(res => {
    //     that.spphone = res.data.phone;
    //     that.sp_real_name = res.data.real_name
    //   }).catch(err => {
    //     that.spphone = '';
    //   })
    },
    methods: {
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
      ChangeIsDefault(e) {
				// console.log(e)
        this.$set(this, 'protocol', !this.protocol);
				this.protocol = !this.protocol
      },
      privacy(type) {
        uni.navigateTo({
          url: "/pages/users/privacy/index?type=" + type
        })
      },
      back() {
        //uni.navigateBack();
        uni.navigateTo({
          url: "/pages/user/auth/name"
        })
      },
      app() {
        window.location.href = `https://yikeshun.wxdaili.com/down/index.html`;
        //uni.navigateTo({
        //	url: `${HTTP_REQUEST_URL}/xyd.apk`
        //})
      },
      again() {
        this.codeUrl =
          VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
      },
      getCode() {
      //   getCodeApi()
      //     .then(res => {
      //       this.keyCode = res.data.key;
      //     })
      //     .catch(res => {
      //       this.$util.Tips({
      //         title: res.msg.msg || this.$t(`加载失败`)
      //       })
      //     });
      },
      async register() {
        let that = this;
				
				console.log(that.checked)
    //     if (!that.checked == 2) {
				// 	this.checked = 1;
				// 	setTimeout(() => {
				// 		this.checked = 0;
				// 		this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
				// 		this.checked = ['2'];
				// 	}, 300)
				// 	return false
				// }
        if (!that.account) {
						this.$wanlshop.msg('请填写手机号码');
						return false
				}
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
        // title: that.$t(`请输入正确的邮箱码`)
        //});
        //if (!that.real_name) return that.$util.Tips({
        //  title: that.$t(`请填写真实姓名`)
        //});
        //if (!that.captcha) return that.$util.Tips({
        //  title: that.$t(`请填写验证码`)
        //});
        //if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
        //  title: that.$t(`请输入正确的验证码`)
        //});
        if (!that.password) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
        if (!that.spphone) {
						this.$wanlshop.msg('推荐人邀请码不能为空');
						return false
				}
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.spphone)) return that.$util.Tips({
          //title: that.$t(`请输入正确的推荐人邮箱`)
        //});
        if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(that.password)) {
					this.$wanlshop.msg('您输入的密码过于简单');
					return false
				}
        if (that.password != that.passwordconf) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
				if(that.isTijiao)
				{
					return false;
				}
				that.isTijiao=true;
				// await
				uni.request({
				    url: '/wanlshop/user/register', 
					method: 'POST',
					data:{
						mobile: that.account,
						captcha: that.captcha,
						password: that.password,
						nickname: that.real_name,
						sharecode: that.spphone
					},
				    success: res => {
						this.$wanlshop.msg('注册成功,请点击下方APP下载,或者跳转登陆');
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 0){
							that.isTijiao=false;
						}
					}
				});
      },
      async reset() {
        let that = this;
				
				console.log(that.checked)
    //     if (!that.checked == 2) {
				// 	this.checked = 1;
				// 	setTimeout(() => {
				// 		this.checked = 0;
				// 		this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
				// 		this.checked = ['2'];
				// 	}, 300)
				// 	return false
				// }
        if (!that.account) {
						this.$wanlshop.msg('请填写手机号码');
						return false
				}
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
        // title: that.$t(`请输入正确的邮箱码`)
        //});
        //if (!that.real_name) return that.$util.Tips({
        //  title: that.$t(`请填写真实姓名`)
        //});
        //if (!that.captcha) return that.$util.Tips({
        //  title: that.$t(`请填写验证码`)
        //});
        //if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({
        //  title: that.$t(`请输入正确的验证码`)
        //});
        if (!that.password) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
    //     if (!that.spphone) {
				// 		this.$wanlshop.msg('推荐人邀请码不能为空');
				// 		return false
				// }
        //if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.spphone)) return that.$util.Tips({
          //title: that.$t(`请输入正确的推荐人邮箱`)
        //});
        if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(that.password)) {
					this.$wanlshop.msg('您输入的密码过于简单');
					return false
				}
        if (that.password != that.passwordconf) {
					this.$wanlshop.msg('请填写密码');
					return false
				}
				if(that.isTijiao)
				{
					return false;
				}
				that.isTijiao=true;
				// await
				uni.request({
				    url: '/wanlshop/user/resetpwd', 
					method: 'POST',
					data:{
						mobile: that.account,
						captcha: that.captcha,
						password: that.password,
						// nickname: that.real_name,
						// sharecode: that.spphone
					},
				    success: res => {
						this.$wanlshop.msg('注册成功,请点击下方APP下载,或者跳转登陆');
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 0){
							that.isTijiao=false;
						}
					}
				});
      },
			
      async registerReset() {
        var that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写邮箱码');
					return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的邮箱码');
					return false
				}
        if (!that.captcha) {
					this.$wanlshop.msg('请填写验证码');
						return false
					
				}
        registerReset({
            account: that.account,
            captcha: that.captcha,
            password: that.password,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg);
            
          })
          .catch(res => {
            that.$util.Tips({
              title: res
            })
          });
      },
			sendMessage() {
				
				// await
				uni.request({
				    url: '/wanlshop/sms/send', 
					method: 'POST',
					data:{
						event: this.event,  
						mobile: this.account
					},
				    success: res => {
						this.$wanlshop.msg('验证码发送成功');
						this.startTimer();
				    },
					// 1.1.8升级
					complete: res =>{
						if(res.data.code == 4){
							this.$refs.wanlCaptcha.init({event: this.event,mobile: this.mobile}).then(() => {
								// 验证通过回调
								this.$wanlshop.msg('验证码发送成功');
								this.startTimer();
							}).catch(() => {
								uni.navigateBack({ delta: 1 });
							});
						}
					}
				});
			},
			startTimer() {
				this.countdown = 60;
				
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimer();
						}
					}, 1000)
				}
			},
			clearTimer() {
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
			resend(){
				this.startTimer();
				this.code = [];
				this.currentFocus = 0;
				this.countdown = 60;
				this.sendMessage();
			},
      async code() {
        let that = this;
        if (!that.account) {
					this.$wanlshop.msg('请填写手机号');
						return false
				}
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) {
					this.$wanlshop.msg('请输入正确的手机号');
						return false
				}
        that.type = "register";
        await registerVerify({
            phone: that.account,
            type: that.type,
            key: that.keyCode,
            code: that.codeVal
          })
          .then(res => {
						this.$wanlshop.msg(res.msg || `加载失败`)
            
            that.sendCode();
          })
          .catch(res => {
						this.$wanlshop.msg(res);
            
          });
      },
    }
  };
</script>

<style>
	@import url("auth.css");
</style>
